<template>
	<view>
		<u-popup :border-radius="40" class="xf-select" :height="'80%'" mode="bottom" v-model="showPopup" @close="close"
			:mask-close-able="false" :mask="true">
			<view class="selBody pT25">
				<scroll-view scroll-y="true" class="pL15 pR15 scrollBox">
					<view class="typeFloor">
						<view class="typeTitle font16 u-3 bold mT15 mB15">发布类型</view>
						<view class="flex flex-wrap">
							<view :class="v.checked?'checked':''" :key="i" class="typeItem"
								@click="checkType('oddReleaseType',v,i)" v-for="(v,i) in oddReleaseTypeLis">
								{{v.text}}
							</view>
						</view>
					</view>
					<view class="typeFloor">
						<view class="typeTitle font16 u-3 bold mT15 mB15">薪资范围</view>
						
						<view class="flex flex-wrap alg-center">
							<view class=" typeItemInput">
								<u-input type="digit"  :input-align="'center'" placeholder="开始"  :border="false"  v-model="params.staSalary"></u-input>
							</view>
							<view class="pL10 pR10">至</view>
							<view class=" typeItemInput">
								<u-input type="digit"  :input-align="'center'" placeholder="结束"  :border="false"  v-model="params.endSalary"></u-input>
							</view>
						</view>
					</view>
					<view class="typeFloor">
						<view class="typeTitle font16 u-3 bold mT15 mB15">用工人数</view>
						<view class="flex flex-wrap alg-center">
							<view class=" typeItemInput">
								<u-input   :input-align="'center'" placeholder="开始"  :border="false"  v-model="params.staJobNum"></u-input>
							</view>
							<view class="pL10 pR10">至</view>
							<view class=" typeItemInput">
								<u-input  :input-align="'center'" placeholder="结束"  :border="false"  v-model="params.endJobNum"></u-input>
							</view>
						</view>
					</view>
					<view class="typeFloor">
						<view class="typeTitle font16 u-3 bold mT15 mB15">结算方式</view>
						<view class="flex flex-wrap">
							<view :class="v.checked?'checked':''" :key="i" class="typeItem"
								@click="checkType('salaryPayment',v,i)" v-for="(v,i) in salaryPaymentLis">
								{{v.text}}
							</view>
						</view>
					</view>
					
					<view class="typeFloor">
						<view class="typeTitle font16 u-3 bold mT15 mB15">自带工具</view>
						<view class="flex flex-wrap">
							<view :class="v.checked?'checked':''" :key="i" class="typeItem"
								@click="checkType('izTools',v,i)" v-for="(v,i) in izToolsLis">
								{{v.text}}
							</view>
						</view>
					</view>
					<view class="typeFloor">
						<view class="typeTitle font16 u-3 bold mT15 mB15">工作方式</view>
						<view class="flex flex-wrap">
							<view :class="v.checked?'checked':''" class="typeItem" @click="checkType('workWay',v,i)"
								v-for="(v,i) in workWayLis" :key="i">
								{{v.text}}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="selBtnBox flex jst-between alg-center mL15 mR15">
					<view class="resetBtn w40" @click="resetBtn">重置</view>
					<view class="confirmBtn w50" @click="sureBtn">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPopup: false,
				
				oddReleaseTypeLis: [],
				salaryRangeLis: [],
				salaryPaymentLis: [],
				jobNumTypeLis: [],
				izToolsLis: [],
				workWayLis: [],
				params:{
					oddReleaseType: '',
					salaryPayment: '',
					izTools: '',
					workWay: '',
					staSalary:'',
					endSalary:'',
					staJobNum:'',
					endJobNum:''
				},
				dicLis: [{
					name: 'jjp_oddjob_release_type',
					v: 'oddReleaseTypeLis'
				}, {
					name: 'jjp_oddjob_salaryRange',
					v: 'salaryRangeLis'
				}, {
					name: 'jjp_oddjob_salary_payment',
					v: 'salaryPaymentLis'
				}, {
					name: 'jjp_oddjob_use_num',
					v: 'jobNumTypeLis'
				}, {
					name: 'jjp_oddjob_iz_tools',
					v: 'izToolsLis'
				}, {
					name: 'jjp_oddjob_work_way',
					v: 'workWayLis'
				}]
			}
		},
		mounted() {
			let arr=this.dicLis
			for (let i = 0; i < arr.length; i++) {
				this.baseStore.getDictionaryDataAll(arr[i].name).then(res => {
					this[arr[i].v] = res.map(v => {
						return {
							...v,
							checked: false
						}
					})
					this[arr[i].v].unshift({
						text: '不限',
						value: ''
					})
				})
			}
		},
		methods: {
			openPoup() {
				this.showPopup = true;
			},
			close() {
				this.showPopup = false;
			},
			resetBtn() {
			  this.params={
					oddReleaseType: '',
					salaryPayment: '',
					izTools: '',
					workWay: '',
					staSalary:'',
					endSalary:'',
					staJobNum:'',
					endJobNum:''
				}
			  for(let i=0;i<this.dicLis.length;i++){
				  this[this.dicLis[i].v].map((item, index) => {
					item.checked =  false
				})
			  }
			},
			sureBtn() {
				let reg=/^[1-9]\d*$/
				
				if(this.params.staJobNum&&!reg.test(this.params.staJobNum)){
					return this.xf.onlineUtils.toast("最低招聘人数只能为正整数!")
				}
				if(this.params.endJobNum&&!reg.test(this.params.endJobNum)){
					return this.xf.onlineUtils.toast("最高招聘人数只能为正整数!")
				}
				if(this.params.staJobNum&&this.params.endJobNum&&Number(this.params.staJobNum)>Number(this.params.endJobNum)){
					return this.xf.onlineUtils.toast("最低招聘人数不能大于最高招聘人数!")
				}
				if(this.params.staSalary&&Number(this.params.staSalary)<=0){
					return this.xf.onlineUtils.toast("最低薪资不能小于0!")
				}
				if(this.params.endSalary&&Number(this.params.endSalary)<=0){
					return this.xf.onlineUtils.toast("最高薪资不能小于0!")
				}
				if(this.params.staSalary&&this.params.endSalary&&Number(this.params.staSalary)>Number(this.params.endSalary)){
					return this.xf.onlineUtils.toast("最低薪资不能大于最高薪资!")
				}
			 //    if(this.params.staSalary) this.params.staSalary=Number(this.params.staSalary)
				// if(this.params.endSalary) this.params.endSalary=Number(this.params.endSalary)
				this.$emit('checkSel',this.params)
				this.close()
			},
			checkType(name, v, i) {
				this.params[name] = v.value;
				this[name + 'Lis'].map((item, index) => {
					item.checked = index === i ? true : false
				})
				// this.typeLis[i].child[j].checked=!this.typeLis[i].child[j].checked;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.typeItemInput {
		width: calc(33% - 30rpx);
		height: 80rpx;
		line-height: 80rpx;
		border: 2rpx solid transparent;
		text-align: center;
		background: #F8F8F8;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}
	
	.selBody {
		background: #fff;
		position: relative;
		height: calc(100% - 50rpx);
	}

	.typeItem {
		width: calc(33% - 30rpx);
		height: 80rpx;
		line-height: 80rpx;
		border: 2rpx solid transparent;
		text-align: center;
		background: #F8F8F8;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;

		&:nth-child(3n) {
			margin-right: 0;
		}

		&.checked {
			color: #3291F8;
			background: #EAF4FE;
			border-radius: 16rpx;
			border: 2px solid #3291F8;
		}
	}

	.scrollBox {
		height: calc(100% - 160rpx);
	}

	.selBtnBox {
		position: absolute;
		left: 0;
		bottom: 0;
		width: calc(100% - 60rpx);
	}
</style>